<template>
  <div class="skinPressureObserve">
    <div v-if="type === '打印'" class="mask"></div>
    <DocHeader
      ref="docHeaderRef"
      :title="title"
      :data="docHeaderData"
      diagnosis
    />
    <div class="myTable">
      <div class="myRow">
        <div class="myCell">Braden Scale评分</div>
      </div>
      <div class="myRow">
        <div class="myCell flex1">评分项目</div>
        <div class="myCell flex4">
          <div class="myRow"><div class="myCell">评分及依据</div></div>
          <div class="myRow">
            <div class="myCell">1分/项</div>
            <div class="myCell">2分/项</div>
            <div class="myCell">3分/项</div>
            <div class="myCell">4分/项</div>
          </div>
        </div>
        <div class="myCell">评分结果（分）</div>
      </div>
      <div v-for="(item, index) in evalItems" :key="index" class="myRow">
        <div class="myCell flex1">{{ item.itemName }}</div>
        <div
          v-for="(item2, index2) in item.options"
          :key="index2"
          class="myCell flex1"
        >
          {{ item2.label }}
        </div>
        <div class="myCell">
          <input v-model="pageData[item.itemCode]" class="txt-c" type="text" />
        </div>
      </div>
      <div class="myRow">
        <div class="myCell">
          评分标准：总分最高分23分，最低分6分，15-18分低度为危险，13-14分中度危险，10-12分高度危险，≤9分非常危险
        </div>
      </div>
      <div class="myRow">
        <div class="myCell" style="justify-content: space-evenly">
          <div
            v-for="(item, index) in pressureTypes"
            :key="index"
            class="inputRadio"
          >
            <span
              class="inputRadio_inner"
              :class="{ checked: pageData.pressureType === item.value }"
            >
              <input
                :id="`pressureType_${idx}_${index}`"
                v-model="pageData.pressureType"
                type="radio"
                :name="`pressureType_${idx}`"
                :value="item.value"
                :checked="pageData.pressureType === item.value"
              />
            </span>
            <label :for="`pressureType_${idx}_${index}`">{{
              item.label
            }}</label>
          </div>
        </div>
      </div>
      <div class="myRow">
        <div class="myCell pl-10" style="justify-content: flex-start">
          皮肤情况（来源、部位、面积、深度）
        </div>
        <div class="myCell pl-10" style="justify-content: flex-start">
          申请难免褥疮理由：
        </div>
      </div>
      <div class="myRow">
        <div class="myCell">
          <textarea v-model="pageData.skinState"></textarea>
        </div>
        <div class="myCell">
          <textarea v-model="pageData.result"></textarea>
        </div>
      </div>
      <div class="myRow">
        <div class="myCell">
          <div class="pl-10 pt-6" style="width: 100%">采取的措施：</div>
          <textarea v-model="pageData.measure1" style="height: 70px"></textarea>
        </div>
        <div class="myCell">
          <div class="pl-10 pt-6" style="width: 100%">采取的措施：</div>
          <textarea v-model="pageData.measure2" style="height: 70px"></textarea>
        </div>
      </div>
      <div class="myRow">
        <div style="padding: 6px; line-height: 1.5em">
          压疮防治措施：
          <span>A保持床铺和衣裤清洁、干燥、舒适，污染后及时更换</span>
          <span class="pl-20">B保持皮肤清洁、干燥、及时清洗</span>
          <span class="pl-20">C定时翻身，转换体位</span>
          <span class="pl-20">D给予气垫床</span>
          <span class="pl-20">E给予减压用具</span>
          <span class="pl-20">F局部贴保护膜</span>
          <span class="pl-20">G加强营养，采取适当的营养支持措施</span>
          <span class="pl-20">H教育告知</span>
          <span class="pl-20">I其它</span>
        </div>
      </div>
      <div class="myRow">
        <div class="myCell">
          <div class="pl-10 pt-6" style="width: 100%">
            病房讨论意见（院内发生）：
          </div>
          <textarea v-model="pageData.view"></textarea>
          <div class="sign">
            <div>护士长签名：</div>
            <input v-model="pageData.sign" type="text" />
          </div>
        </div>
      </div>
    </div>
    <div class="tips">
      <div>备注说明：</div>
      <div>
        <div>
          1、凡有院外、高危及难免压疮的，需在24小时内填写此表上报护理部。
        </div>
        <div>2、如遇节假日，在上班的第一个工作日上报。</div>
      </div>
    </div>
    <div class="createdInfo">
      填表人：
      <input v-model="pageData.createName" type="text" style="width: 220px" />
    </div>
    <div class="createdInfo">
      填表日期：
      <input v-model="pageData.createTime" type="text" style="width: 220px" />
    </div>
    <div style="text-align: right">
      {{ hospitalName }}<span style="padding-left: 1em"></span>护理部
    </div>
  </div>
</template>
<script>
import { format } from 'date-fns'
import { cloneDeep } from 'lodash-unified'
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'
import { baseData, evalItems, pressureTypes } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    formType: {
      type: String,
      default: 'add'
    },
    type: {
      type: String,
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      evalItems,
      pressureTypes,
      pageData: {},
      docHeaderData: {},
      docHeaderRef: {},
      hospitalName: window.hospitalName
    })

    const store = getStoreFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function initData() {
      console.log(props.type, props.formType)
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.docHeaderData = {
          patientName: jsonText.patientName,
          wardName: jsonText.wardName,
          bedNumber: jsonText.bedNumber,
          hospitalNumber: jsonText.hospitalNumber,
          ryInfo: jsonText.ryInfo,
          zd: jsonText.zd
        }
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        state.pageData = cloneDeep(baseData)
      }
    }

    function getParams() {
      const docPatCur = state.docHeaderRef.docPatCur
      const docHeaderParams = [
        'patientName',
        'wardName',
        'bedNumber',
        'hospitalNumber',
        'ryInfo',
        'zd'
      ]
      docHeaderParams.forEach(v => {
        if (v === 'zd') {
          docPatCur[v] = state.docHeaderRef.zd
        } else {
          state.pageData[v] = docPatCur[v]
        }
      })
      return state.pageData
    }

    watch(
      () => props.data,
      () => {
        initData()
      },
      { immediate: true }
    )

    return {
      ...toRefs(state),
      patCur,
      getParams,
      format
    }
  }
})
</script>

<style lang="scss" scoped>
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.myTable {
  margin-top: 20px;
  border: 1px solid;

  .myRow {
    width: 100%;
    border-top: 1px solid;
    display: flex;

    &:first-child {
      border-top: none;
    }

    .myCell {
      width: 100%;
      min-height: 36px;
      border-left: 1px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      &:first-child {
        border-left: none;
      }

      .sign {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 10px;

        input {
          width: 220px;
        }
      }
    }
  }
}

.tips {
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
  line-height: 1.5em;
}

.createdInfo {
  display: flex;
  align-items: center;
  padding-left: 120px;
  margin-top: 10px;
}

input,
textarea {
  display: block;
  appearance: none;
  width: 100%;
  border: none;
  resize: none;
  outline: none;
  background: transparent;
}

textarea {
  height: 100px;
  padding: 10px;
}

.inputRadio {
  display: flex;
  align-items: center;

  .inputRadio_inner {
    border: 1px solid #aaa;
    width: 14px;
    height: 14px;
    flex-shrink: 0;

    &.checked {
      &::before {
        display: block;
        content: '✔';
        font-size: 14px;
        text-align: center;
        line-height: 14px;
      }
    }
  }

  label {
    font-weight: normal;
    margin-left: 6px;
    flex-shrink: 0;
  }

  input[type='radio'] {
    appearance: none;
    outline: none;
    border: 1px solid #aaa;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0;
  }
}

.txt {
  &-l {
    text-align: left;
  }

  &-c {
    text-align: center;
  }
}

.pl {
  &-10 {
    padding-left: 10px;
  }

  &-20 {
    padding-left: 20px;
  }
}

.pt {
  &-6 {
    padding-top: 6px;
  }
}

.flex1 {
  width: 16.6% !important;
  flex-shrink: 0;
}

.flex4 {
  width: 66.4% !important;
  flex-shrink: 0;
}
</style>
